<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.searchKey1"
        placeholder="请输入名称"
        style="width: 200px"
        class="filter-item"
      />
      <el-select
        v-model="listQuery.searchKey2"
        style="width: 180px"
        class="filter-item"
        :remote-method="getTypeList"
        filterable
        remote
        placeholder="请选择通知类型"
      >
        <el-option
          v-for="item in typeListOptions"
          :key="item.value"
          :label="item.label"
          :value="item.label"
        />
      </el-select>
      <el-date-picker
        v-model="listQuery.searchKey3"
        type="date"
        placeholder="请选择通知日期"
        style="width: 200px"
        class="filter-item">
      </el-date-picker>
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="searchAndSort"
      >
        查找
      </el-button>
      <el-button
        v-if="checkPermission(['通知公告：创建'])"
        class="filter-item"
        style="margin-left: 10px"
        type="primary"
        icon="el-icon-edit"
        @click="$router.push(`/announcement/create`)"
      >
        新增
      </el-button>
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column label="通知标题" min-width="50px">
        <template slot-scope="{ row }">
          <span class="link-type">{{
            row.announcementName
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="通知类型" min-width="100px">
        <template slot-scope="{ row }">
          <span class="link-type">{{
            row.announcementType
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="通知日期" min-width="50px">
        <template slot-scope="{ row }">
          <span class="link-type">{{
            row.announcementDate | convertUTCToGMTString
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建者姓名" min-width="50px">
        <template slot-scope="{ row }">
          <span class="link-type">{{
            row.announcementCreatorName
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="通知状态" min-width="50px">
        <template slot-scope="{ row }">
          <span class="link-type">{{
            row.announcementStatus
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="230"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row, $index }">
          <el-button
            size="mini"
            type="success"
            @click="$router.push(`/announcement/view/${row.id}`)"
          >
            查看
          </el-button>
          <el-button
            v-if="checkPermission(['通知公告：更新'])"
            type="primary"
            size="mini"
            @click="$router.push(`/announcement/edit/${row.id}`)"
          >
            编辑
            <i class="el-icon-edit"></i>
          </el-button>
          <el-button
            v-if="checkPermission(['通知公告：删除'])"
            size="mini"
            type="danger"
            @click="handleDelete(row, $index)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.pageIndex"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { searchThreeIncludeDate } from "@/utils";
import Pagination from "@/components/Pagination";
import { fetchAnnouncementList, deleteAnnouncement } from '@/api/announcement';
import {checkPermission} from '@/utils/permission';
import announcementTypes from "@/data/announcementTypes";

export default {
  name: "announcementList",
  components: { Pagination },
  filters: {
    typeFilter(type) {
      return calendarTypeKeyValue[type];
    },
  },
  data() {
    return {
      tableKey: 0,
      totalList: null,
      list: null,
      total: 0,
      listLoading: true,
      typeListOptions: announcementTypes,
      listQuery: {
        pageIndex: 1,
        limit: 10,
        searchField1: 'announcementName',
        searchKey1: '',
        searchField2: 'announcementType',
        searchKey2: '',
        searchField3: 'announcementDate',
        searchKey3: '',
      },
    };
  },
  created() {
    this.getList();
  },
  filters: {
    convertUTCToGMTString(val) {
      if (!val) return "";
      const currentDate = new Date(val);
      const month =
        currentDate.getMonth() < 9
          ? `0${currentDate.getMonth() + 1}`
          : (currentDate.getMonth() + 1).toString();
      return `${currentDate.getFullYear()}-${month}-${currentDate.getDate()}`;
    },
  },
  methods: {
    checkPermission,
    getList() {
      this.listLoading = true;
      fetchAnnouncementList().then(res => {
        this.totalList = res.data;
        this.handleFilter();

        this.listLoading = false;
      })
    },
    getTypeList(query) {
      if (query !== "") {
        this.typeListOptions = announcementTypes.filter((item) => {
          return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
        });
        this.loading = false;
      } else {
        this.typeListOptions = announcementTypes;
      }
    },
    handleFilter() {
      const result=searchThreeIncludeDate(this.totalList, this.listQuery);
      this.list = result.data;
      this.total=result.total;
    },
    searchAndSort() {
      this.listQuery.pageIndex = 1;
      this.handleFilter();
    },
    handleDelete(row, index) {
      this.$confirm(`是否确定删除 "${row.announcementName}"`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
          deleteAnnouncement(row.id).then((res) => {
            if (res.data) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              //重新获取
              this.getList();
            } else {
              this.$message({
                message: "角色删除失败",
                type: "error",
              });
            }
          })
          .catch((err) => {
            this.$message({
              message: "角色删除失败",
              type: "error",
            });
          });
      });
    },
  },
};
</script>
